<template>
    <div class="article_list">
        <!-- 获取文章列表 -->
        <div class="single_info" v-for="(item,index) in articleList" :key="index">
            <div class="info_title"><p>{{item.title}}</p></div>
            <div class="info_abstract"><span>{{item.abstract}}</span></div>
            <div class="info_abstract info_bottom">
                <span class="el-icon-news"> {{item.category}}</span>
                <span>@{{item.author}}</span>
                <span class="el-icon-time"> {{formatTime(item.modify_time||item.create_time)}}</span>
                <span class="el-icon-document"> {{item.m_count}}</span>
            </div>
      </div>
    </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  name: "articleList",
  data() {
    return {
      articleList: []
    };
  },
  computed:{
      
  },
  created() {
    // 初始化文章列表
    this.initInfo();
  },
  components: {},
  methods: {
    ...mapActions(["GET_ARTICLE_LIST"]),
    // 初始化文章列表
    initInfo() {
      this.GET_ARTICLE_LIST().then(res => {
        this.articleList = res;
      });
    },
    formatTime(value){
          return value.slice(0,10);
      }
  }
};
</script>

<style lang="scss" scoped>
.article_list {
    width: 100%;
  .single_info {
    // position: relative;
    // right:0;
    text-align: left;
    box-sizing: border-box;
    width:100%;
    .info_title {
      font-size: 24px;
      padding-bottom: 20px;
    }
    .info_title:hover {
      color: rgb(101, 176, 219);
    }
    .info_abstract {
      font-size: 16px;
      color: #999;
    }
    .info_bottom{
        
        span{
            padding:20px;
        }
    }
  }
}
</style>
